<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="google" value="notranslate">

  <title>AZ picker for Bootcards</title>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootcards CSS files for desktop, iOS and Android -->
  <!-- You'll only need to load one of these (depending on the device you're using) in production -->
  <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-ios.min.css" rel="stylesheet"> -->
   <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-desktop.min.css" rel="stylesheet"> -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-android.min.css" rel="stylesheet">

  <!-- Font awesome -->
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

</head>

<body>

  <!-- fixed top navbar -->
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <button type="button" class="btn btn-default btn-back pull-left hidden" onclick="history.back()">
        <i class="fa fa-lg fa-chevron-left"></i>
        <span>Back</span>
      </button>
      <!-- menu button to show/ hide the off canvas menu -->
      <button type="button" class="btn btn-default btn-menu pull-left" data-toggle="offcanvas">
        <i class="fa fa-lg fa-bars"></i>
        <span>Menu</span>
      </button>

      <a class="navbar-brand" title="Bootcards Starter" href="/">Bootcards Starter</a>  

      <!--navbar menu options: shown on desktop only -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">
              <i class="fa fa-dashboard"></i>Dashboard
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-building-o"></i>Companies
            </a>
          </li>
          <li class="active">
            <a href="#">
              <i class="fa fa-users"></i>Contacts
            </a>
          </li>
        </ul>
      </div>          
    </div>
  </div>   

  <nav class="navmenu offcanvas offcanvas-left">
    <ul class="nav">
      <li>
        <a href="#">
          <i class="fa fa-lg fa-dashboard"></i>Dashboard
        </a>
      </li>
      <li>
        <a href="starter-template.html">
          <i class="fa fa-lg fa-users"></i>Contacts
        </a>
      </li>
      <li class="active">
        <a href="az-picker.html">
          <i class="fa fa-lg fa-font"></i>AZ Picker
        </a>
      </li>
      <li>
        <a href="double-navbar.html">
          <i class="fa fa-lg fa-font"></i>Double Navbar
        </a>
      </li>
    </ul>
  </nav><!--nav-->

  <div class="container bootcards-container push-right">

    <!-- This is where you come in... -->
    <!-- I've added some sample data below so you can get a feel for the required markup -->

    <div class="row">

      <!-- left list column -->
      <div class="col-sm-4 bootcards-list" id="list" data-title="Contacts">

        <ol class="bootcards-az-picker">
          <li><a href="">A</a></li>
          <li><a href="">B</a></li>
          <li><a href="">C</a></li>
          <li><a href="">D</a></li>
          <li><a href="">E</a></li>
          <li><a href="">F</a></li>
          <li><a href="">G</a></li>
          <li><a href="">H</a></li>
          <li><a href="">I</a></li>
          <li><a href="">J</a></li>
          <li><a href="">K</a></li>
          <li><a href="">L</a></li>
          <li><a href="">M</a></li> 
          <li><a href="">N</a></li> 
          <li><a href="">O</a></li> 
          <li><a href="">P</a></li> 
          <li><a href="">Q</a></li> 
          <li><a href="">R</a></li> 
          <li><a href="">S</a></li> 
          <li><a href="">T</a></li> 
          <li><a href="">U</a></li> 
          <li><a href="">V</a></li> 
          <li><a href="">W</a></li> 
          <li><a href="">X</a></li> 
          <li><a href="">Y</a></li> 
          <li><a href="">Z</a></li> 
        </ol>

        <div class="panel panel-default">       

          <div class="list-group">

            <!-- list of sample data -->

            <div class="list-group-item bootcards-list-subheading">A</div>

            <a class="list-group-item" href="#">
              <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Acey, Sofia</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <a class="list-group-item" href="#">
              <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Acey, Sofia</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <a class="list-group-item" href="#">
              <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Acey, Sofia</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <div class="list-group-item bootcards-list-subheading">B</div>

            <a class="list-group-item" href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <a class="list-group-item" href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <a class="list-group-item" href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>

            <a class="list-group-item" href="#">
              <img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Barish, Joseph</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Bess, Jerry</h4>
              <p class="list-group-item-text">ZetaComm</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Biddy, Jamie</h4>
              <p class="list-group-item-text">Masung Corp.</p>
            </a>
            
            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

             <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Booth, Mark</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <div class="list-group-item bootcards-list-subheading">C</div>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Core, Jack</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Core, Jack</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <div class="list-group-item bootcards-list-subheading">K</div>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Kreps, Dan</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <div class="list-group-item bootcards-list-subheading">L</div>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Lobo, Kurt</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Long, Allan</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <div class="list-group-item bootcards-list-subheading">O</div>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Orrel, Brent</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <div class="list-group-item bootcards-list-subheading">W</div>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">Weimer, Norman</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>

            <a class="list-group-item " href="#">
              <img src="img/Mark Booth.jpg" class="img-rounded pull-left">
              <h4 class="list-group-item-heading">West, Matt</h4>
              <p class="list-group-item-text">Burning Core</p>
            </a>
            
          </div><!--list-group-->

          <div class="panel-footer">
            <small class="pull-left">Built with Bootcards - List</small>
            <a class="btn btn-link btn-xs pull-right" href="#">
              Footer link</a>
          </div>
        </div><!--panel-->

        </div><!--list-->

        <!--list details column-->
        <div class="col-sm-8 bootcards-cards hidden-xs">

          <!--contact details -->
          <div id="contactCard">

            <div class="panel panel-default">
              <div class="panel-heading clearfix">
                <h3 class="panel-title pull-left">Contact Details</h3>
                <div class="btn-group pull-right visible-xs">
                  <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#editModal">
                    <i class="fa fa-pencil"></i>
                    <span>Edit</span>
                  </a>
                </div>  
                <a class="btn btn-primary pull-right hidden-xs" href="#" data-toggle="modal" data-target="#editModal">
                  <i class="fa fa-pencil"></i>
                  <span>Edit</span>
                </a>
              </div>
              <div class="list-group">
                <div class="list-group-item">
                  <img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
                  <label>Name</label>
                  <h4 class="list-group-item-heading">Acey, Sofia</h4>
                </div>

                <div class="list-group-item">
                  <label>Company</label>
                  <h4 class="list-group-item-heading">Masung Corp.</h4>
                </div>

                <div class="list-group-item">
                  <label>Job Title</label>
                  <h4 class="list-group-item-heading">Finance Director (ZCT)</h4>
                </div>

                <div class="list-group-item">
                  <label>Department</label>
                  <h4 class="list-group-item-heading">Finance</h4>
                </div>

                <a class="list-group-item" href="tel://+1 650-555-0055">
                  <label>Phone</label>
                  <h4 class="list-group-item-heading">+1 650-555-0055</h4>
                </a>

                <a class="list-group-item" href="mailto:Sofia.Acey@masung.com">
                  <label>Email</label>
                  <h4 class="list-group-item-heading">Sofia.Acey@masung.com</h4>
                </a>

              </div>

              <div class="panel-footer">
                <small class="pull-left">Built with Bootcards - Base Card</small>
                <a class="btn btn-link btn-xs pull-right" href="#">
                  Card footer link</a>
                </div>    
              </div>

            </div><!--contact card-->

            <!--rich text card sample-->
            <div class="panel panel-default bootcards-richtext">
                <div class="panel-heading">
                  <h3 class="panel-title">Rich Text Card Heading</h3>
                </div>
                <div class="panel-body">
                  <p class="lead">Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                  <h1>Heading 1</h1>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h5>Heading 5</h5>
                  <h6>Heading 6</h6>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.</p>
                  <ul>
                    <li>Duis cursus dui et turpis gravida sollicitudin.</li>
                    <li>Donec eget mauris feugiat, euismod purus nec, feugiat neque.</li>
                    <li>Nunc erat est, molestie eget magna in, consectetur euismod lorem.</li>
                  </ul>
                  <ol>
                    <li>Sed luctus congue orci quis tempus.</li>
                    <li>Praesent in viverra lorem.</li>
                    <li>Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.</li>
                  </ol>
                </div>
                <div class="panel-footer">
                  <small>Built with Bootcards - Rich Text Card</small>
                </div>
              </div><!--end rich text card-->

        </div><!--list-details-->

    </div><!--row-->


  </div><!--container-->

  <!-- fixed tabbed footer -->
  <div class="navbar navbar-default navbar-fixed-bottom">

    <div class="container">

      <div class="bootcards-desktop-footer clearfix">
        <p class="pull-left">Bootcards</p>
      </div>

      <div class="btn-group">
        <a href="#" class="btn btn-default">
          <i class="fa fa-2x fa-dashboard"></i>Dashboard
        </a>
        <a href="starter-template.html" class="btn btn-default">
          <i class="fa fa-2x fa-users"></i>Contacts
        </a>
        <a href="az-picker.html" class="btn btn-default active">
          <i class="fa fa-2x fa-font"></i>AZ Picker
        </a>
      </div>
    </div>

  </div><!--footer-->

    <!-- Bootstrap & jQuery core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <!-- Bootcards JS -->
    <script src="../src/js/bootcards.js"></script>

    <!--recommended: FTLabs FastClick library-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>

    <script type="text/javascript">

      /*
       * Initialize Bootcards.
       * 
       * Parameters:
       * - offCanvasHideOnMainClick (boolean): hide the offcanvas menu on clicking outside the off canvas
       * - enableTabletPortraitMode (boolean): enable single pane mode for tablets in portraitmode
       * - disableRubberBanding (boolean): disable the iOS rubber banding effect
       */
      bootcards.init( {
        offCanvasHideOnMainClick : true,
        enableTabletPortraitMode : false,
        disableRubberBanding : true 
      });

      bootcards.initAZPicker(".bootcards-az-picker");

      //enable FastClick
      window.addEventListener('load', function() {
          FastClick.attach(document.body);
      }, false);

    </script>
  </body>
</html>
